<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <p>
            <label for="uname">用户名</label>
            <input type="text" id="uname" name="username" value="小明">
        </p>
        <p>
            性别：
            <label for="male">
                男：
                <input name="gender" type="radio"  id="male" value="男">
            </label>
            <label for="female">
                女：
            <input name="gender"  type="radio" id="female"value="女">
            </label>
        </p>
        <p>
            <div>班级选择：</div>
            <select name="classes" id="classes">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </p>
    </form>
</body>
<script src="./jquery.js"></script>
<script>
    $("uname").focus(function(){
        console.log($(this).val());   //输出默认值
    })
    $("#unam").blur(function(){//用户离开unam输入框时触发
        alert(`你输入的账户是:${(this).val()}`)

    })
    $("#uname").select(function(){//选中输入框内容生效
        $(this).css("background","pink")

    })
    使用属性选择器选中name是gender的元素
     $("[name=gender]").change(function(){
        console.log($(this).val());
    })
    $("#classes").change(function(){
        alert($(this.val));
    })
</script>
</html>